  <script lang="ts" setup>
  import batteryLevel1 from '@/assets/battery/level1.png'
  import batteryLevel2 from '@/assets/battery/level2.png'
  import batteryLevel3 from '@/assets/battery/level2.png'
  import airConditioner from '@/assets/device/airConditioners.png'
  import tableLamp from '@/assets/device/tableLamp.png'
  import television from '@/assets/device/television.png'

  const tableData = [
    {
      "deviceImg": airConditioner,
      "deviceName": "Air Conditioner",
      "location": "Kitchen",
      "status": true,
      "batteryLevel": batteryLevel1,
      "createTime": "2023-08-12T15:48:32.123Z"
    },
    {
      "deviceImg": television,
      "deviceName": "TV",
      "location": "Bedroom",
      "status": true,
      "batteryLevel": batteryLevel2,
      "createTime": "2023-05-04T08:22:55.432Z"
    },
    {
      "deviceImg": tableLamp,
      "deviceName": "Refrigerator",
      "location": "Living Room",
      "status": true,
      "batteryLevel": batteryLevel3,
      "createTime": "2023-11-29T19:33:01.654Z"
    },
    {
      "deviceImg": airConditioner,
      "deviceName": "Washing Machine",
      "location": "Bathroom",
      "status": false,
      "batteryLevel": batteryLevel3,
      "createTime": "2023-07-21T11:11:11.111Z"
    },
    {
      "deviceImg": tableLamp,
      "deviceName": "Microwave",
      "location": "Study",
      "status": true,
      "batteryLevel": batteryLevel3,
      "createTime": "2023-03-15T03:33:33.333Z"
    }
  ]

  function rowStyle({ }) {
      return { height: '100px' };
    }

  const handleDelete = (id:number) => {
    console.log(id)
  }

  </script>


  <template>
    <div class="device_title">
      <div>
        设备
      </div>

    </div>
    <div class="device_main" >
      <el-table :data="tableData" :row-style="rowStyle">
      <el-table-column prop="deviceImg" label="设备" width="150" height="250" color="blue" align="center">
        <template #default="scope">
          <img :src="scope.row.deviceImg" width="30px">
        </template>
      </el-table-column>
      <el-table-column prop="deviceName" label="设备名称" width="150" />
      <el-table-column prop="location" label="位置" width="150" />
      <el-table-column prop="status" label="状态" width="150">
        <template #default="scope">
          <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="batteryLevel" label="电量" width="150">
        <template #default="scope">
          <img :src="scope.row.batteryLevel" width="30">
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />

      <!-- 删除按钮所在的列 -->
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    </div>
  </template>

  <style lang="scss" scpoed>
  .device_title{
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    color:aliceblue;
    width: 95%;
    margin-bottom : 20px;
    .el-avatar{
      padding: 3px;
      background-color:#1f8efa;
    }
    .el-avatar:hover{
      background-color: black;
    }
  }

  .device_main{
    background-color: rgb(47, 59, 82);
    width: 95%;

    .el-table-column:first-child{
      display: flex;
      margin-left: 100px;
    }

    .el-table{
      width: 100%;
      --el-table-tr-bg-color: black;
    }

    .el-table :deep(.el-table__header) {
      background-color: rgb(47, 59, 82) !important; /* 设置表头背景颜色 */
      color: white !important; /* 设置表头文字颜色 */
    }

    .el-table tr:not(:last-child) > td {
    border-bottom: 1px solid rgb(35, 45, 65) !important; /* 设置行之间的边框颜色 */
  }




  }


  </style>
